//引入样式
require('../../assets/css/normalize.css')
require('../../assets/css/reset.css')
require('../../assets/fonts/iconfont.css');
require('./sports_course.less');
require('../../assets/css/tabbar.less')
require('../../assets/css/navbar.less')

//引入模块
let axios = require('../../utils/axios.js')
let dom = require('../../utils/dom.js')

document.addEventListener('DOMContentLoaded', function () {
    //底部导航渲染
    dom.tabbar('sports')

    //顶部导航渲染
    dom.navbar('course')

    //获取训练课程列表
    axios.get('/api/train/courseList').then(res => {
        let courseArr = res.data.data
        let couerseF = courseArr.shift();

        //渲染最新课程
        //a
        dom.get('.newcourse-a').href = "sports_course_detail.html?id="+ couerseF.courseId
        //图片
        dom.get('#img').src = `http://fitness.h5.itsource.cn:3701` + couerseF.imgurl
        //name
        dom.get('.name').textContent = couerseF.name
        //desc
        dom.get('.desc').textContent = couerseF.desc.slice(0, 18) + '...'

        //渲染课程列表
        let html = ''
        courseArr.forEach(v => {
            html += `
             <li>
                    <a href="sports_course_detail.html?id=${v.courseId}" >
                        <img src="http://fitness.h5.itsource.cn:3701${v.imgurl}">
                        <h3 class="name">${v.name}</h3>
                        <p class="desc">${v.desc.slice(0, 18) + '...'}</p>
                    </a>
                </li>
            `
        })
        dom.get('.course-list-ul').innerHTML = html

    })
})